// 第三发库
import React from "react";
import { Button, Select, Space, Table } from "antd";
import { UnorderedListOutlined } from "@ant-design/icons";
// import { Link } from "react-router-dom";
// 自定义文件
import "./SaleitemsList.sass";
// 组件配置
const { Option } = Select;

const showLength = [
  { value: 5, OptionName: "05 条可见" },
  { value: 10, OptionName: "10 条可见" },
  { value: 15, OptionName: "15 条可见" },
  { value: 20, OptionName: "20 条可见" },
];
const handleChange = (value) => {
  console.log(`selected ${value},缺回调`);
};
const addGrand = () => {
  console.log("点击添加新数据");
};

const columns = [
  //#region
  //   {
  //     title: "Name", // 表头内容
  //     dataIndex: "name", //
  //     key: "name", // 虚拟渲染的key
  //     //表格元素中的组件渲染
  //     render: (text，items) => {
  //       第一个参数，data中 对应行，对应key 的参数
  //       第二个参数，data中 对应行，的所有参数
  //       console.log(text);
  //       return <Link to={"/testfoantd"}>{text}</Link>;
  //     },
  //   },
  //#endregion
  {
    title: "商品编号",
    dataIndex: "key",
    key: "key",
    align: "center",
  },
  {
    title: "商品名称",
    dataIndex: "saleitemsName",
    key: "saleitemsName",
    align: "center",
  },
  {
    title: "成本价格",
    dataIndex: "costPrice",
    key: "costPrice",
    align: "center",
  },
  {
    title: "规格",
    dataIndex: "specification",
    key: "specification",
    align: "center",
  },
  {
    title: "产地厂商",
    dataIndex: "firmName",
    key: "firmName",
    align: "center",
  },
  {
    title: "品牌",
    dataIndex: "grandName",
    key: "grandName",
    align: "center",
  },
  {
    title: "种类",
    dataIndex: "classficationName",
    key: "classficationName",
    align: "center",
  },
  {
    title: "一级包装",
    dataIndex: "firstSpecification",
    key: "firstSpecification",
    align: "center",
  },
  {
    title: "二级包装",
    dataIndex: "secondSpecification",
    key: "secondSpecification",
    align: "center",
  },
  {
    title: "OnSale",
    dataIndex: "onsaleOrNot",
    key: "onsaleOrNot",
    align: "center",
    render: (text) => {
      return <Button>{text ? "已上架" : "已下架"}</Button>;
    },
  },
  {
    title: "操    作",
    key: "action",
    align: "center",
    render: (_, grandInf) => {
      return (
        <Space size="middle">
          <Button
            onClick={(e) => {
              console.log("grandInf: ", grandInf);
              console.log(e);
            }}
          >
            编辑
          </Button>
          <Button
            onClick={(e) => {
              console.log("grandInf: ", grandInf);
              console.log(e);
            }}
          >
            删除
          </Button>
        </Space>
      );
    },
  },
];
const data = [
  {
    key: "1", //这个是必备的键值对，循环要用
    saleitemsName: "哇哈哈 纯牛奶",
    costPrice: 111,
    specification: `1 * 12`,
    firmName: "不知道",
    firstSpecification: 1,
    secondSpecification: 12,
    onsaleOrNot: true,
    classficationName: "牛奶",
    grandName: "娃哈哈",
    saleitemsCount: 97,
  },
  {
    key: "2",
    saleitemsName: "白象 纯牛奶",
    costPrice: 111,
    specification: `1 * 12`,
    firmName: "不知道",
    firstSpecification: 1,
    secondSpecification: 12,
    onsaleOrNot: true,
    classficationName: "牛奶",
    grandName: "白象",
    saleitemsCount: 98,
  },
  {
    key: "3",
    saleitemsName: "旺仔 纯牛奶",
    costPrice: 111,
    specification: `1 * 12`,
    firmName: "不知道",
    firstSpecification: 1,
    secondSpecification: 12,
    onsaleOrNot: true,
    classficationName: "牛奶",
    grandName: "旺仔",
    saleitemsCount: 99,
  },
  {
    key: "4", //这个是必备的键值对，循环要用
    saleitemsName: "娃哈哈 发发糕",
    costPrice: 111,
    specification: `1 * 12`,
    firmName: "不知道",
    firstSpecification: 1,
    secondSpecification: 12,
    onsaleOrNot: true,
    classficationName: "速食",
    grandName: "娃哈哈",
    saleitemsCount: 97,
  },
  {
    key: "5",
    saleitemsName: "白象 泡椒牛肉面",
    costPrice: 111,
    specification: `1 * 12`,
    firmName: "不知道",
    firstSpecification: 1,
    secondSpecification: 12,
    onsaleOrNot: true,
    classficationName: "速食",
    grandName: "白象",
    saleitemsCount: 98,
  },
  {
    key: "6",
    saleitemsName: "蒙牛 纯牛奶",
    costPrice: 111,
    specification: `1 * 12`,
    firmName: "不知道",
    firstSpecification: 1,
    secondSpecification: 12,
    onsaleOrNot: true,
    classficationName: "速食",
    grandName: "旺仔",
    saleitemsCount: 99,
  },
];

// 组件渲染
export default function SaleitemsList() {
  return (
    <div className="ClassficationList">
      <div className="boxesTitle">
        <Space>
          <UnorderedListOutlined />
          数据列表
        </Space>
        <Space>
          <Select
            defaultValue={showLength[0].value}
            style={{
              width: 120,
            }}
            onChange={handleChange}
          >
            {showLength.map((item) => {
              return (
                <Option key={item.value} value={item.value}>
                  {item.OptionName}
                </Option>
              );
            })}
          </Select>
          <Button onClick={addGrand}>添加</Button>
        </Space>
      </div>
      <div className="grandShow">
        <Table
          columns={columns}
          dataSource={data}
          // 在table中默认可以调用pagination，配置的属性，放在配置对象中
          pagination={{
            total: 88,
            showSizeChanger: false,
            showQuickJumper: false,
            showTotal: (a, b) => {
              console.log(a);
              console.log(b);
              return `共${data.length}条`;
            },
          }}
        />
      </div>
    </div>
  );
}
